<template>
  <el-container>
    <el-aside>
      <el-scrollbar>
        <div class="component-list">
          <div v-for="(item, listIndex) in componentList" :key="listIndex">
            <div class="components-title">
              <svg-icon icon-class="component" />
              {{ item.title }}
            </div>
            <draggable
              class="components-draggable"
              :list="item.list"
              :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
              :clone="cloneComponent"
              draggable=".components-item"
              :sort="false"
              @ended="onEnd"
            >
              <template #item="{ element }">
                <div class="components-body">
                  <svg-icon :icon-class="element.config.tagIcon" />
                  {{ element.config.label }}
                </div>
              </template>
            </draggable>
          </div>
        </div>
      </el-scrollbar>
    </el-aside>
    <el-main>
      <el-scrollbar>
        <draggable class="drawing-board" :list="drawingList" :animation="340" group="componentsGroup">
          <template #item="{ item }">
            {{ item }}
          </template>
        </draggable>
      </el-scrollbar>
    </el-main>
  </el-container>
</template>
<script lang="ts" setup>
import draggable from "vuedraggable"
import { type Ref, ref } from "vue"
import { echartsComponentGroup, echartCompnent } from "@/config/echarts-designer"

const componentList: Ref<Array<echartsComponentGroup>> = ref([
  {
    title: "echarts组件",
    list: []
  }
])
const activeId = ref("")
const drawingList: any = []
const onEnd = (item: any) => {
  console.log(item)
}
const cloneComponent = (component: echartCompnent) => {
  console.log(component)
}
// const addComponent = (component: echartCompnent) => {
//   console.log(component)
// }
// const drawingItemCopy = (item: any) => {
//   console.log(item)
// }
// const activeFormItem = (item: any) => {
//   console.log(item)
// }
// const drawingItemDelete = (item: any) => {
//   console.log(item)
// }
</script>
